Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP13。

接著繼續來處理 DataService 的相關設計。

首先，打開 Servcies 底下的 IDataService 這個介面，並加上下列方法的宣告：

ObservableCollection<Models.OrderDetailDisplay> GetOrderDetailDisplays(int orderId);

完成結果如下圖：

接著仍是跟過去一樣要把實作此 IDataService 介面的兩個類別 DataService、MockData 加上實作方法。

先開啟 DataService 類別，並加上下列程式碼：

public ObservableCollection<OrderDetailDisplay> GetOrderDetailDisplays(int orderId)
{
    throw new NotImplementedException();
}

完成結果如下圖：

再來打開在 Utilities 底下的 MockData 並加入下列程式碼：

public ObservableCollection<OrderDetailDisplay> GetOrderDetailDisplays(int orderId)
{
    throw new NotImplementedException();
}

完成結果如下圖：

接著在 MockData 當中宣告一個 orderDetails 的集合：

private readonly ObservableCollection<Models.OrderDetail> orderDetails;

完成結果如下圖：

並在其建構方法當中產生 orderDetails 的集合物件及其資料：

orderDetails = new ObservableCollection<Models.OrderDetail>()
{
    new Models.OrderDetail { Id =  1, OrderId = 1, ProductId = 1, Quantity =   5, Price = 190, Note = "無" },
    new Models.OrderDetail { Id =  2, OrderId = 1, ProductId = 2, Quantity =  40, Price =  45, Note = "無" },
    new Models.OrderDetail { Id =  3, OrderId = 1, ProductId = 4, Quantity =  20, Price = 170, Note = "無" },
                                    
    new Models.OrderDetail { Id =  4, OrderId = 2, ProductId = 3, Quantity = 200, Price =  50, Note = "無" },
    new Models.OrderDetail { Id =  5, OrderId = 2, ProductId = 2, Quantity = 100, Price =  40, Note = "無" },
    new Models.OrderDetail { Id =  6, OrderId = 2, ProductId = 4, Quantity = 100, Price = 150, Note = "無" },
    new Models.OrderDetail { Id =  7, OrderId = 2, ProductId = 5, Quantity =  20, Price =  40, Note = "無" },
                                    
    new Models.OrderDetail { Id =  8, OrderId = 3, ProductId = 1, Quantity =  10, Price = 180, Note = "無" },
    new Models.OrderDetail { Id =  9, OrderId = 3, ProductId = 2, Quantity =  30, Price =  45, Note = "無" },

    new Models.OrderDetail { Id = 10, OrderId = 4, ProductId = 3, Quantity = 200, Price =  50, Note = "無" },
    new Models.OrderDetail { Id = 11, OrderId = 4, ProductId = 2, Quantity =  50, Price =  45, Note = "無" },
    new Models.OrderDetail { Id = 13, OrderId = 4, ProductId = 5, Quantity =  20, Price =  40, Note = "無" },

    new Models.OrderDetail { Id = 14, OrderId = 5, ProductId = 1, Quantity =   1, Price = 200, Note = "無" },
    new Models.OrderDetail { Id = 15, OrderId = 5, ProductId = 2, Quantity =  10, Price =  50, Note = "無" },
    new Models.OrderDetail { Id = 16, OrderId = 5, ProductId = 4, Quantity =  10, Price = 180, Note = "無" },

    new Models.OrderDetail { Id = 17, OrderId = 6, ProductId = 1, Quantity = 200, Price = 160, Note = "無" },

    new Models.OrderDetail { Id = 18, OrderId = 7, ProductId = 2, Quantity = 500, Price =  35, Note = "無" },

    new Models.OrderDetail { Id = 19, OrderId = 8, ProductId = 1, Quantity =  20, Price = 160, Note = "無" },
    new Models.OrderDetail { Id = 20, OrderId = 8, ProductId = 5, Quantity =  50, Price =  40, Note = "無" },
};

完成結果如下圖：

注意這邊的 OrderDetail 只有增加給前 8 筆訂單(原設置有 15 筆)，若有需要可以自行增加後 7 筆訂單的 OrderDetail。

最後，再回到前面幫 MockData 設置的 GetOrderDetailDisplays 方法，並把方法該執行的程式碼替換成如下：

var orderDetailDisplays = from orderDetail in orderDetails
                            join product in goods on orderDetail.ProductId equals product.Id
                            where orderDetail.OrderId == orderId
                            select new Models.OrderDetailDisplay
                            {
                                OrderDetailId = orderDetail.Id,
                                ProductName = product.Name,
                                Quantity = orderDetail.Quantity,
                                Note = orderDetail.Note
                            };
return new ObservableCollection<Models.OrderDetailDisplay>(orderDetailDisplays);

完成結果如下圖：

最後記得到 OrderDetailsPageViewModel 當中 OrderId 在 Set 當中所註解的程式碼移除註解：

如果沒有意外，應該就能直接測試執行囉~~~